
<template>
  <!-- 
  胡龙伟
  视频的精选页面
  2021/8/29
 -->

  <div class="container">
    <!-- 内容区域 -->
    <!-- :loop="false" -->
    <van-swipe
      vertical
      :loop="false"
      class="videoContainer"
      :show-indicators="false"
      @change="load"
    >
      <!-- show-indicators="false" -->

        <van-swipe-item v-for="(item, index) in videoList1" :key="index" >
          <!-- 视频 -->
          <video
            controls
            :src="item.mp4Url"
            class="videoItem"
            type="video/mp4"
          ></video>
          <!--视频简介 + 用户信息 -->
          <div class="userInfo">
            <!-- 视频简介 -->
            <span class="videoTitle">
              {{ item.title }}
            </span>
            <!-- 用户信息 -->
            <div class="bottonInfo">
              <!-- 头像 id 关注 -->
              <div class="left">
                <van-image
                  round
                  width="30px"
                  height="30px"
                  :src="item.userImg"
                  class="info"
                />
                <span class="info id">{{ item.userName }}</span>
                <van-button class="info button" round icon="plus" size="small"
                  >关注</van-button
                >
              </div>
              <!-- 分享点赞评论 -->
              <div class="right">
                <!-- 点赞 -->
                <van-icon class="icon" name="like-o" badge="99" />
                <!-- 评论 -->
                <van-icon
                  class="icon"
                  @click="piinglun"
                  name="chat-o"
                  badge="9"
                />
                <!-- 分享 -->
                <!-- @click="showPopup" -->
                <van-icon
                  @click="showShare = true"
                  class="icon"
                  name="share-o"
                />
              </div>
            </div>
          </div>
        </van-swipe-item>
    </van-swipe>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
// import {geiVideo2List} from '../../../api/index'
export default {
  name: "",
  data() {
    return {
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],

      showShare: false, //分享
      isplay: false,
      videoList1: [
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "ff",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
          title: "Bridge 跑车里 法拉利 人民币 靠自己",
          userImg:
            "http://p1.music.126.net/O_vfmrX_LtXfvvuqKgJVwQ==/109951165189732405.jpg",
          userName: "santinooo",
          isplay: false,
        },
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
      ],
      videoList: [
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "ff",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
          title: "Bridge 跑车里 法拉利 人民币 靠自己",
          userImg:
            "http://p1.music.126.net/O_vfmrX_LtXfvvuqKgJVwQ==/109951165189732405.jpg",
          userName: "santinooo",
          isplay: false,
        },
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "ff",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
          title: "Bridge 跑车里 法拉利 人民币 靠自己",
          userImg:
            "http://p1.music.126.net/O_vfmrX_LtXfvvuqKgJVwQ==/109951165189732405.jpg",
          userName: "santinooo",
          isplay: false,
        },
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "ff",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
          title: "Bridge 跑车里 法拉利 人民币 靠自己",
          userImg:
            "http://p1.music.126.net/O_vfmrX_LtXfvvuqKgJVwQ==/109951165189732405.jpg",
          userName: "santinooo",
          isplay: false,
        },
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "ff",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
          title: "Bridge 跑车里 法拉利 人民币 靠自己",
          userImg:
            "http://p1.music.126.net/O_vfmrX_LtXfvvuqKgJVwQ==/109951165189732405.jpg",
          userName: "santinooo",
          isplay: false,
        },
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "ff",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
          title: "Bridge 跑车里 法拉利 人民币 靠自己",
          userImg:
            "http://p1.music.126.net/O_vfmrX_LtXfvvuqKgJVwQ==/109951165189732405.jpg",
          userName: "santinooo",
          isplay: false,
        },
        {
          id: "aa",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4",
          title: "蔡徐坤见面会《ei ei》cut",
          userImg:
            "http://p1.music.126.net/RxJs6M6bPyK58BInPh0c-w==/109951163683129956.jpg",
          userName: "很污缺不撩",
          isplay: false,
        },
        {
          id: "cc",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4",
          title: "Bigbang能把颁奖礼办成演唱会，这互动好有趣！",
          userImg:
            "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
          userName: "莫想聆听",
          isplay: false,
        },
        {
          id: "ff",
          mp4Url:
            "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
          title: "Bridge 跑车里 法拉利 人民币 靠自己",
          userImg:
            "http://p1.music.126.net/O_vfmrX_LtXfvvuqKgJVwQ==/109951165189732405.jpg",
          userName: "santinooo",
          isplay: false,
        },
      ],
    };
  },
  mounted() {
    // 获取视频列表
    // this.geiVideoList()
  },
  watch: {
    isplay() {},
  },
  methods: {
    // 下拉刷新
    load(index) {
        let a = this.videoList.slice(0, 3);
        if(index==3)
        this.videoList1.push(...a);
        // // 加载状态结束
        // this.loading = false;
        // if (this.videoList1.length > 300) {
        //   this.finished = true;
        // }
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // async geiVideoList() {
    //   const result = await geiVideo2List()
    //   if (result.code == 200) {
    //     console.log(result);
    //   }
    // },
    piinglun() {
      console.log(1111111);
    },
    // 切换视频时触发
    changeIndex(index) {
      // const p = this.videoList
      // if(index==6){
      //   this.videoList.push(...p)
      // }
      // index 当前页面的索引
      // 切换视频，发请求，获取数据 push到数组，
      // this.$refs.paly.pause = false
      // let myVideo = document.getElementById('videoId')
      // myVideo.paused()
      // console.dir(myVideo)
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  // position: absolute;
  // top: 0px;
  // bottom: 0px;
  background-color: #121212;
  .navBar {
    position: absolute;
    z-index: 1;
    width: 100%;
    display: flex;
    height: 30px;
    line-height: 30px;
    // text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 20px;
    color: rgb(255, 254, 254);
    .navText {
      margin: 0 auto;
      color: #9f9f9f;
      .active {
        color: #e7e7e7;
        border-bottom: 2px solid #bfa;
      }
      .zhishi {
        margin-right: 20px;
      }
      .huodong {
        margin-left: 20px;
      }
    }
    i {
      line-height: 30px;
    }
  }
  .videoContainer {
    height: 627px;
    width: 100%;
    // overflow: hidden;
    .videoItem {
      width: 100%;
      margin-top: 50%;
    }
    .userInfo {
      width: 100%;
      // margin-bottom: 50%;
      position: absolute;
      bottom: 40px;
      // top: 100px;
      .videoTitle {
        color: rgb(95, 90, 90);
        text-align: center;
        width: 350px;
        height: 32px;
        // line-height: 32px;
        // text-overflow: ellipsis;s
        // white-space: pre-wrap;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .bottonInfo {
        color: #eee;
        display: flex;
        justify-content: space-between;
        height: 30px;
        // line-height: 30px;
        .left {
          margin-left: 5px;
          .id {
            display: inline-block;
            width: 50px;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            position: absolute;
            bottom: 0px;
            // background-color: aqua;
          }
          .info {
            margin-left: 5px;
          }
          .button {
            bottom: 10px;
            left: 60px;
          }
        }
        .right {
          position: relative;
          margin-right: 10px;
          .icon {
            margin: 10px;
          }
          // .share{
          // width: 375px;
          // height: 300px;
          // position: absolute;
          // z-index: 99;
          // left: -200px;
          // top: -200px;
          // }
        }
      }
    }
  }
}
</style>
